<template>
  <div>
    <el-dialog title="新增模板" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form ref="form" :model="modelForm" label-width="100px">
        <el-form-item label="模板名称">
          <el-input v-model="modelForm.name" size="small"></el-input>
        </el-form-item>

        <div style="border: 1px solid #d1dbe5;height: 170px;">
          <el-row :gutter="24">
            <!--云端权限 - 左侧大模块-->
            <el-col :span="8" style="border-right: 1px solid #d1dbe5;padding-right: 0">
              <div class="menu">
                <div class="menuItem" :class="{'activity':selectId==i.parentPermission.id}"
                     @click="selectId=i.parentPermission.id;CLOUD_RIGHT=i.subPermissions" v-for="i in CLOUD">
                  <input v-model="i.parentPermission.hasPermission" type="checkbox" @change="backEndChange(i)">&nbsp;&nbsp;
                  {{i.parentPermission.name}}
                </div>
              </div>
            </el-col>

            <!--云端权限 - 右侧展示当前模块子级操作-->
            <el-col :span="16" style="padding: 10px">
              <div style="height: 170px;overflow-y: auto">
                            <span class="checkbox-group" v-for="i in CLOUD_RIGHT" v-if="i.parentId">
                                 <label class="check-lable p-r-5"><input type="checkbox" @change="backEndItemChange(i)"
                                                                         v-model="i.hasPermission">{{i.name}}</label>
                            </span>
              </div>
            </el-col>
          </el-row>
        </div>

      </el-form>


      <div class="foot-bar-button">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default {
    props: ['isShow', 'id'],  //参数
    data() {
      return {
        modelForm: {},
        showDialog: false,
        activityId: "",
        isSave: true,
        settlemements: [],
        states: [],
        selectId: 1,
        CLOUD_RIGHT: [],
        CLOUD: [
          {
            parentPermission:
              {
                code: "1001",
                hasPermission: false,
                id: "1",
                name: "餐厅管理",
                parentId: "parent",
                scope: "0"
              }
            ,
            subPermissions: [{
              code: "1001001",
              hasPermission: false,
              id: "2",
              name: "菜单管理",
              parentId: "1",
              scope: "0"
            },
              {
                code: "1001002",
                hasPermission: false,
                id: "3",
                name: "原因备注",
                parentId: "1",
                scope: "0"
              },
              {
                code: "1001003",
                hasPermission: false,
                id: "4",
                name: "支付管理",
                parentId: "1",
                scope: "0"
              },
              {
                code: "1001004",
                hasPermission: false,
                id: "5",
                name: "折扣管理",
                parentId: "1",
                scope: "0"
              },
              {
                code: "1001005",
                hasPermission: false,
                id: "6",
                name: "服务费管理",
                parentId: "1",
                scope: "0"
              }
            ]
          },

          /*第二个权限 start
          * */

          {
            parentPermission:
              {
                code: "2001",
                hasPermission: false,
                id: "7",
                name: "会员管理",
                parentId: "parent",
                scope: "0"
              }
            ,
            subPermissions: [{
              code: "2001001",
              hasPermission: false,
              id: "8",
              name: "积分兑换方案",
              parentId: "1",
              scope: "0"
            }
            ]
          },
          /*第二个权限 end*/

          /*三 start*/
          {
            parentPermission:
              {
                code: "3001",
                hasPermission: false,
                id: "9",
                name: "库存管理",
                parentId: "parent",
                scope: "0"
              }
            ,
            subPermissions: [{
              code: "3001001",
              hasPermission: false,
              id: "10",
              name: "原材料管理",
              parentId: "1",
              scope: "0"
            },
              {
                code: "3001002",
                hasPermission: false,
                id: "11",
                name: "成本卡管理",
                parentId: "1",
                scope: "0"
              },
              {
                code: "3001003",
                hasPermission: false,
                id: "12",
                name: "店间调拨",
                parentId: "1",
                scope: "0"
              },
            ]
          },
          /*三 end*/
        ],
      };
    },
    watch: {
      isShow: function (newValue, oldValue) {
        this.showDialog = newValue;
        this.selectId = this.CLOUD[0].parentPermission.id;
        this.CLOUD_RIGHT = this.CLOUD[0].subPermissions;

      }
    },
    created() {
      window.this = this;
    },
    methods: {
      greet() {

      },
      goBack() {
        this.router.go(-1);
      },

      backEndChange(i) {
        if (i.parentPermission.hasPermission) {
          for (let s = 0; s < i.subPermissions.length; s++) {
            i.subPermissions[s].hasPermission = true;
          }
        } else {
          for (let s = 0; s < i.subPermissions.length; s++) {
            i.subPermissions[s].hasPermission = false;
          }
        }
      },
      backEndItemChange(i) {
        var count = 0;
        for (let s = 0; s < this.CLOUD_RIGHT.length; s++) {
          if (!this.CLOUD_RIGHT[s].hasPermission) {
            count++;
          }
        }
        for (let s = 0; s < this.CLOUD.length; s++) {
          if (i.parentId == this.CLOUD[s].parentPermission.id) {
            if (count > 0) {
              this.CLOUD[s].parentPermission.hasPermission = false;
            } else {
              this.CLOUD[s].parentPermission.hasPermission = true;
            }
          }
        }
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.isSave) {
              this.$axios.post("stores/suppliers/create", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }

              })

            } else {
              this.modelForm._method = "PUT";
              this.$axios.put("stores/suppliers/" + this.activityId + "/update", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }
              })
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit('close');
        this.showDialog = false;
      },
      handleClose(done) {
        this.$emit('close');
        done();
      },
      isNum(item, key) {
        var r = /^\+?[1-9][0-9]*$/;
        if (!r.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      },
      isDouble(item, key) {
        var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        if (!isNum.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      }
    }
  }
</script>
<style scoped>
  .menu {
    height: 170px;
    overflow-y: auto;
  }

  .menu .menuItem {
    /*border-right: 1px solid #d1dbe5;*/
    padding: 10px 15px;
    color: #71a4d2;
  }

  .menu .activity {
    border-top: 1px solid #d1dbe5;
    border-bottom: 1px solid #d1dbe5;
    border-right: 0px solid #fff !important;
    background-color: #8894A0;
    color: #ffffff;
  }

  .checkbox-group {
    float: left;
    background: #f5f5f5;
    border: 1px solid #d1dbe5;
    padding: 0 5px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .checkbox-group .input-group-checkbox {
    padding: 14px 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    float: left;
    font-size: 14px;
  }

  .checkbox-group .check-lable, .checkbox-group .check-close {
    padding-top: 5px;
    float: left;
    margin-bottom: 5px;
    font-size: 14px;
  }

  .bg_yellow {
    background-color: yellow;
  }

  .role_permission .el-tabs__header {
    margin-bottom: 0 !important;
  }
</style>
